<template>
  <div class="box-year">
    <div class="title">
      <p>年度游客量对比</p>
      <p class="bg"></p>
    </div>
    <div ref="yearChart" class="charts" />
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

const yearChart = ref()

onMounted(() => {
  const myChartYear = echarts.init(yearChart.value)
  myChartYear.setOption({
    title: {
      text: '(人数)',
      top: 20,
      left: 15,
      textStyle: {
        color: '#fff',
        fontWeight: 100,
        fontSize: 12,
      },
    },
    color: ['#80FFA5', '#00DDFF', '#37A2FF'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    legend: {
      type: 'plain',
      show: true,
      data: ['2012', '2013', '2014'],
      top: 0,
      right: 20,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: 20,
      top: 50,
      right: 20,
      bottom: 10,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      // 两边不留白
      boundaryGap: false,
      // 轴线的设置
      axisLine: {
        show: true,
        // Y 轴刻度文字样式
        lineStyle: {
          color: '#fff',
        },
      },
      // 分割线
      splitLine: {
        show: false,
      },
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      alignTicks: false,
    },
    yAxis: {
      type: 'value',
      // 轴线的设置
      axisLine: {
        show: true,
        // Y 轴刻度文字样式
        lineStyle: {
          color: '#fff',
        },
      },
      // 分割线
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: '2012',
        type: 'line',
        // stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 2,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)',
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236, 0.1)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [140, 232, 501, 264, 90, 340, 450, 23, 567, 323, 441, 221],
      },
      {
        name: '2013',
        type: 'line',
        // stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 2,
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(0, 221, 255)',
            },
            {
              offset: 1,
              color: 'rgb(77, 119, 255,0.1)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [120, 282, 111, 334, 220, 340, 310, 123, 332, 117, 228, 289],
      },
      {
        name: '2014',
        type: 'line',
        // stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 2,
          color: '#bfa',
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(55, 162, 255)',
            },
            {
              offset: 1,
              color: 'rgb(116, 21, 219, 0.1)',
            },
          ]),
        },
        emphasis: {
          focus: 'series',
        },
        data: [320, 132, 401, 334, 190, 130, 220, 110, 323, 666, 543, 31],
      },
    ],
  })
})
</script>

<style lang="scss" scoped>
.box-year {
  background: url('../../images/dataScreen-main-rc.png') no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;
  .title {
    margin-left: 10px;
    color: white;
    font-size: 20px;
  }
  .bg {
    width: 68px;
    height: 7px;
    background: url('../../images/dataScreen-title.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
  }
  .charts {
    height: calc(100% - 50px);
  }
}
</style>
